<template>
    <div class="header">

        <div class="logo">
            <div v-if="!collapse" style="width:250px;">
                <router-link to="/home">
                        <img v-if="!logoimg" src="../../assets/logo.png"
                        style="width:200px;margin-right:0px;margin-top: -15px;" />
                    <span class="aenlien1" v-if="userInfo == 'GOV'"><span
                            style="color: #0376FE;">政府平台</span><br />ENLIEN</span>
                </router-link>
                <router-link to="/home">
                    <img v-if="logoimg" :src="$store.state.plantImg + logoimg"
                        style="height:70px;width:250px;margin-right:10px;" />
                </router-link>
                <!--   <router-link to="/home" v-if="logoimg != ''">< img :src="$store.state.plantImg + logoimg" style="height:70px;width:250px;margin-right:10px;" ></img></router-link> -->
            </div>
            <div v-else style="width:64px">
                <router-link to="/home"><img v-if="$store.state.logozImg"
                        :src="$store.state.plantImg + $store.state.logozImg" style="height:70px;"></img></router-link>
                <router-link to="/home"><img v-if="!store.state.logozImg" src="../../assets/img/logo-min.png"
                        style="height:70px;"></img></router-link>
            </div>
        </div>
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
        <div class="systemtab" :class="{ active: index == isActive }" v-for="(item, index) in apps" :key="index"
            @click="handleTabs(index)">
            {{ item.appName }}
            <!-- {{item.tibetName}} -->
            <div style="position: absolute;top: 20px" v-show="$store.state.zangw == '1'">
                འདེབས་འཛུགས་ལས་སྟེགས་
            </div>
        </div>
        <!-- <div class="systemtab" @click="gotodatacenter" v-if="dataplane">
            数据中心
        </div> -->
        <!-- <div class="systemtab" v-for="(item, index) in apps" :key="index">
        </div> -->
<!--        <div class="systemtab" @click="goHover()">-->
<!--            物联网平台-->
<!--        </div>-->
        <div class="systemtab" @click="goBig()">
            数据中心
        </div>

        <!--<router-link class="systemtab" target="_blank" :to="{path:'/systemSetup/organization/dataCenter',query:{id:'1'}}">数据中心</router-link>-->
        <div class="header-right">
            <div class="header-user-con">
                <div class="btn-fullscreen" @click="handleSystem" v-if="systemSetupShow">
                    <i class="el-icon-s-tools"></i>
                    系统设置
                </div>
                <!-- 消息中心 -->
                <div class="btn-bell" style="width: 60px">
                    <el-badge class="item">
                        <span class="hot">{{ this.$store.state.num }}</span>
                        <!--<router-link @click="toMessage">
                            消息
                        </router-link>-->
                        <span @click="toMessage" style="font-size:14px;">消息</span>
                    </el-badge>

                </div>
                <!-- 用户头像 -->
                <div class="user-avator">
                    <img v-if="headImgs" :src="headImg" alt="">
                    <span v-else>{{ usernameImg }}</span>
                </div>

                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ username }}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="goone">个人中心</el-dropdown-item>
                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
import bus from '../common/bus';
import { message_getmessage } from "@/request/api"
export default {
    inject: ['reload'],
    data() {
        return {
            userInfo: localStorage.getItem('userType'),
            dataplane: false,
            isActive: false,
            systemSetupShow: true,
            collapse: false,
            fullscreen: false,
            name: 'linxin',
            message: 2,
            usernameImg: '',
            num: 0,
            headImg: '',
            apps: [],
            configMenus: [],
            appId: { appId: '' },
            headImgs: false,
            username: '',
            logoimg: '',
            logozimg: ''
        };
    },
    computed: {
        // logoimg(){
        //     return this.$store.getters.logoimg
        // },
        usernames() {
            var _this = this
            let username = localStorage.getItem('ms_username');
            // let name = localStorage.gethitItem('loginname');

            // _this.username = name
            // console.log(JSON.parse(userInfo.userInfo.))
            _this.usernameImg = name.substring(0, 1)
            return username ? username : this.name;
        }
    },
    methods: {
        goHover() {
            localStorage.setItem('Atoken', JSON.parse(sessionStorage.getItem("token")))
             let username= sessionStorage.getItem('userName')
			let password= sessionStorage.getItem('password')
            // location.href = 'http://grove.cpzsyun.com:81/bg/?companyId=' + localStorage.getItem('companyId')
            // window.open('http://grove.cpzsyun.com:81/bg/?companyId=' + localStorage.getItem('companyId'))
            window.open('http://grove.cpzsyun.com:81/iotPro/#/login?userName='+username+'&password='+password)
        },
        goBig() {
            localStorage.setItem('Atoken', JSON.parse(sessionStorage.getItem("token")))
            window.open('http://bbgy.cpzsyun.com:81/bg/?companyId=4028814b89ae9d99018acf7d745c0031')
        },
        handleTabs(index) {
            sessionStorage.setItem('setTabStatus', "sss")
            this.isActive = index
            let val = this.apps[index]
            // var url = ""
            if (process.env.NODE_ENV === 'development') {
                // var url = "https://bbgy.cpzsyun.com:82/api/";
                var url = "https://bbgy.cpzsyun.com:82/api/"
            } else if (process.env.NODE_ENV === 'production') {
                // var url = "https://bbgy.cpzsyun.com:82/api/"
                // var url = ""
                var url = "https://bbgy.cpzsyun.com:82/api/"
            }
            // let url = "http://192.168.0.100:8880/";
            if (val.appId == "001") {
                url += "control/";
            } else if (val.appId == "002") {
                url += "plant/";
                localStorage.setItem("lj", "种植");
            } else if (val.appId == "003") {
                url += "breed/";
                localStorage.setItem("lj", "养植");
            } else if (val.appId == "004") {
                url += "produce/"
                localStorage.setItem("lj", "生产");
            } else if (val.appId == "007") {
                url += "produce/"
                localStorage.setItem("lj", "生产");
            }
            console.log(url)
            // localStorage.setItem("requestUrl",val.appUrl)
            localStorage.setItem("requestUrl", url);
            this.configMenus = val.configMenus

            bus.$emit("changeApp", val)
            this.appId.appId = val.appId

            if (val.configMenus.length == 0) {
                this.systemSetupShow = false
            } else {
                this.systemSetupShow = true
            }
            var type = sessionStorage.getItem("setTabStatus")

            if (type == "sss") {

            } else {
                this.reload()
            }
        },
        //点击消息
        toMessage() {
            this.$router.push('/systemSetup/organization/indexsss');
        },
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'loginout') {
                localStorage.removeItem('ms_username');
                sessionStorage.removeItem("token")
                localStorage.clear()
                this.$router.push('/login');
            }
            if (command == "goone") {
                localStorage.setItem("ide", "zxc")
                // this.reload();
                this.$router.push('/personal')
            }
        },
        //更改app

        // 侧边栏折叠
        collapseChage() {
            this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        },
        // 点击前往系统设置
        handleSystem() {
            var val = this.appId
            // console.log(val)
            sessionStorage.setItem('setTabStatus', "123")
            // this.$store.commit('setTabStatus',"ss")
            bus.$emit('changeApp', val);

            var s = JSON.parse(localStorage.getItem("userInfo"))

            var r = s.userInfo.userType
            if (r == "GOV") {
                //  var url = "https://bbgy.cpzsyun.com:82/api/plant/"
                var url = "https://bbgy.cpzsyun.com:82/api/plant/"
                localStorage.setItem("requestUrl", url);
            }
            localStorage.setItem("type", "1")
            if (this.configMenus.length == 0) {
                this.$router.push({
                    path: '/system403'
                })
            } else {

                // this.$router.push({
                //     path:this.configMenus[0].router
                // })
            }

        },
        gotodatacenter() {
            localStorage.setItem("requestUrl", "https://bbgy.cpzsyun.com:82/api/plant/")
            this.$router.push('/systemSetup/organization/dataCenter');
            // window.open(this.$router.push('/systemSetup/organization/dataCenter'));
            // window.open('');
            // window.open('','localhost:8080/#/systemSetup/organization/dataCenter');
            // this.$router.push(window.open('/systemSetup/organization/dataCenter'));
            // window.open();

        }
    },
    mounted() {
        this.logoimg = JSON.parse(sessionStorage.getItem('logoimg'))
        this.logozImg = JSON.parse(sessionStorage.getItem('logozImg'))
        console.log(this.logoimg);
        // this.reload()
        // console.log(this.$util.get('logoimg'))
        if (this.$util.get("userInfo").userInfo.userType == "GOV" || this.$util.get("userInfo").userInfo.userType == "COMPANY") {
            this.dataplane = true
        } else {
            this.dataplane = false
        }

        var show = localStorage.getItem("system")
        if (show == "show") {
            this.systemSetupShow = true
        } else {
            this.systemSetupShow = false
        }
        if (document.body.clientWidth < 1200) {
            this.collapseChage();
        }
        var headimgr = localStorage.getItem("headImg")
        let name = localStorage.getItem('loginname');
        // console.log(name)
        if (name) {
            this.username = "admin"
        } else {
            this.username = name
        }

        if (headimgr == "" || headimgr == null || headimgr == "null") {
            this.headImgs = false

        } else {
            if (localStorage.getItem('headImg')) {
                this.headImg = this.$store.state.plantImg + localStorage.getItem('headImg')
            }
            this.headImgs = true
        }

        if (this.$util.get("userInfo").appMenus == null || this.$util.get("userInfo").appMenus == "") {

        } else {
            let appMenus = this.$util.get("userInfo").appMenus;
            if (appMenus && appMenus.length > 0) {
                if (appMenus != null && appMenus.length > 0) {
                    for (var i = 0; i < appMenus.length; i++) {
                        this.apps.push(appMenus[i]);
                    }
                }
            }
        }

    },
    created() {
        // console.log(this.$store.state.logoimg)
        this.configMenus = JSON.parse(sessionStorage.getItem('permission'))
    }
};
</script>
<style scoped>
.active {
    color: #409EFF;
}

.aenlien {
    display: block;
    height: 76px;
    line-height: 76px;
    font-size: 24px;
    font-weight: bold;
    color: #0C131B;
}

.aenlien1 {
    display: block;
    height: 76px;
    line-height: 30px;
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #0C131B;
}

.header {
    position: relative;
    box-sizing: border-box;
    /* width: 100%; */
    /* min-width:1200px; */
    height: 70px;
    font-size: 22px;
}

.systemtab {
    line-height: 70px;
    display: inline-block;
    margin-left: 30px;
    cursor: pointer;
    position: relative;
    /* width: 150px; */
}

.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}

.collapse-btn:hover {
    background: #eee;
}

.header .logo {
    float: left;
    height: 100%;
    line-height: 4;
    text-align: center;
}

.header .menuTop {
    float: left;
}

.header .menuTop ul li {
    float: left;
    padding-left: 15px;
    line-height: 70px;
    font-size: 14px;
}

.header-right {
    float: right;
    padding-right: 50px;
}

.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}

.btn-fullscreen {
    /* transform: rotate(45deg); */
    margin-right: 5px;
    font-size: 13px;
}

.btn-bell,
.btn-fullscreen {
    position: relative;
    width: 80px;
    /* height: 30px; */
    line-height: 10px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}

.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}

.btn-bell .el-icon-bell {
    color: #000;
}

.btn-bell a {
    font-size: 13px;
    color: #000;
}

.btn-bell .item .hot {
    background-color: #F56C6C;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
}

.user-name {
    margin-left: 10px;
}

.user-avator {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #909399;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    margin-left: 10px;
    font-size: 14px;
}

.user-avator img {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.el-dropdown-link {
    cursor: pointer;
}

.el-dropdown-menu__item {
    text-align: center;
}

.logotle {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #409EFF;
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
}
</style>
